<template>
  <div class="index">
    <header class="header">
      <div class="h-top">
        <div class="site">
          <span>
            <img src="../assets/images/dz.png">
          </span>
          <span>东城区北京市政府</span>
          <span>
            <img src="../assets/images/dz2.png">
          </span>
        </div>
        <dl class="weather">
          <dd class="w-l">
            <span class="du">-3°</span>
            <span class="du1">多云夜</span>
          </dd>
          <dt>
            <img src="//fuss10.elemecdn.com/2/81/442ec3a18ba42c024cc3e14d1998bpng.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/">
          </dt>
        </dl>
      </div>
      <div class="h-center">
        <span class="iconfont">
          &#xe72c;
        </span>
        <span>
          搜索商家、商品名称
        </span>
      </div>
      <div class="swiper-nav">
        <swiper class='sw' :options="swiperOption1" ref="swiper">
          <swiper-slide v-for='(v,i) in navs' :key='i'>
            <span>
              {{v}}
            </span>
          </swiper-slide>
        </swiper>
      </div>
    </header>
    <div class="banner">
      <swiper class='sw1' :options="swiperOption2" ref="swiper">
          <swiper-slide v-for='(v,i) in bas' :key='i'>
            <dl v-for='(a,b) in v.dy' :key='b'>
              <dt><img :src="a.img"></dt>
              <dd>{{a.content}}</dd>
            </dl>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
    <div class="tu">
      <img src="https://fuss10.elemecdn.com/3/c8/45b2ec2855ed55d90c45bf9b07abbpng.png?imageMogr/format/webp/thumbnail/!710x178r/gravity/Center/crop/710x178/">
    </div>
    <main class="main">
      <div class="top">
        <span></span>
        <span>推荐商家</span>
        <span></span>
      </div>
      <div class="body">
        <router-link tag='div' to="particulars" class="ban" v-for="(v,i) in cont" :key='i'>
          <div class="b-top">
            <div class="b-left">
              <span>
                <img :src="v.imgs">
              </span>
            </div>
            <div class="b-right">
              <p class="title">
                <span>{{v.pp}}</span>
                <span>{{v.title}}</span>
                <span>{{v.piao}}</span>
              </p>
              <p class="rate">
                <span><img :src="v.tu"></span>
                <span>{{v.fen}}</span>
                <span>月售{{v.yue}}单</span>
              </p>
              <p class="ztime">
                <span class="z-l">
                  <span>{{v.ds}}</span>
                  <span> | </span>
                  <span>{{v.ps}}</span>
                </span>
                <span class="z-r">
                  <span>{{v.jl}}</span>
                  <span> | </span>
                  <span>{{v.time}}</span>
                </span>
              </p>
            </div>
          </div>
          <div class="b-bottom" :class="hidden">
            <div class="jo-l">
              <p v-for="(x,a) in v.js" :key='a'>
                <span>{{x.zi}}</span>
                <span>{{x.ni}}</span>
              </p>
            </div>
            <div class="jo-r" v-if="v.hd">
              <span @click='show'>{{v.hd}}个活动</span><span class="iconfont ic">&#xe506;</span>
            </div>
          </div>
        </router-link>
      </div>
    </main>
    <my-footer></my-footer>
  </div>
</template>

<script>
import myFooter from '@/components/myFooter'

export default {
  name: 'index',
  data(){
    return {
      navs: [
        "面","热狗","粥","水果99减20","披萨","麦当劳","炸鸡","鸡排","烧烤","周黑鸭"
      ],
      bas: [
        {
          dy:[
            {
              img:"//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"美食"
            },
            {
              img:"//fuss10.elemecdn.com/1/48/bf1a859bf81553bbcfd6cf4ac42cbjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"早餐"
            },
            {
              img:"//fuss10.elemecdn.com/c/3c/0184f5b3fa72f295fc01864734218jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"商超便利"
            },
            {
              img:"//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/Center",
              content:"果蔬生鲜"
            },
            {
              img:"//fuss10.elemecdn.com/1/a5/b4aa9dd27ff21d0a76bb0da550fd7jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"炸鸡炸串"
            },
            {
              img:"//fuss10.elemecdn.com/6/74/785eafaf358fa6b18df37c64c3510jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"大牌"
            },
            {
              img:"//fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"甜品饮品"
            },
            {
              img:"//fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"医药健康"
            }
          ]
        },
        {
          dy:[
            {
              img:"//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"美食"
            },
            {
              img:"//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"美食"
            },
            {
              img:"//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"美食"
            },
            {
              img:"//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"美食"
            },
            {
              img:"//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"美食"
            },
            {
              img:"//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/",
              content:"美食"
            }
          ]
        }
      ],
      cont: [
        {
          imgs:"//fuss10.elemecdn.com/1/32/c75a72f674052473fb35b5c8ab1d7jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
          pp:"品牌",
          title:"北京麦当劳祈年大街餐厅",
          piao:"票",
          tu:"../../static/images/xing.png",
          fen:"4.8",
          yue:"1563",
          ds:"¥0起送",
          ps:"配送费¥9",
          jl:"1.09km",
          time:"33分钟",
          js: [
            {
              zi:"特",
              ni:"【专享玩具套餐】美味亦是正义"
            },
            {
              zi:"特",
              ni:"【立减22元】麦麦早餐❀家庭餐"
            },
            {
              zi:"首",
              ni:"【专享玩具套餐】美味亦是正义"
            }
          ],
          hd:"3"
        },
        {
          imgs:"//fuss10.elemecdn.com/1/32/c75a72f674052473fb35b5c8ab1d7jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
          pp:"品牌",
          title:"吉野店(北京站店)",
          piao:"票",
          tu:"../../static/images/xing.png",
          fen:"4.8",
          yue:"1563",
          ds:"¥0起送",
          ps:"配送费¥7",
          jl:"2.20km",
          time:"47分钟",
          js: [
            {
              zi:"首",
              ni:"【专享玩具套餐】美味亦是正义"
            },
            {
              zi:"首",
              ni:"【专享玩具套餐】美味亦是正义"
            }
          ]
        }
      ],
      swiperOption1: {
        slidesPerView: 'auto',
      },
      swiperOption2: {
        pagination: {
          el: '.swiper-pagination',
        },
      },
      hidden:"jo-hidd"
    }
  },
  methods: {
    show() {
      this.hidden=this.hidden ? false : 'jo-hidd';
    }
  },
  mounted() {

  },
  components: {
    myFooter
  }

}
</script>

<style scoped lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.index{
  width: 100%;
  .header{
    background: linear-gradient(0deg,#00a9ff,#0086ff);
    width: 100%;
    box-sizing: border-box;
    padding:0 2%;
    .h-top{
      width: 100%;
      display: flex;
      .pxToRem(height,102);
      justify-content:space-between;
      .site{
        width: 50%;
        display: flex;
        align-items:center;
        justify-content:center;
        span{
          width: 100%;
          color: #fff;
          .pxToRem(font-size,35);
          &:first-child{
            .pxToRem(width,35);
            .pxToRem(height,35);
            margin-right:2%;
          }
          &:nth-child(2){
            flex:1;
          }
          &:last-child{
            .pxToRem(width,35);
            .pxToRem(height,35);
          }
          img{
            width: 100%;
          }
        }
      }
      .weather{
        width: 30%;
        display: flex;
        align-items:center;
        justify-content:flex-end;
        dd{
          margin-right: 2%;
          display: flex;
          text-align: center;
          flex-direction:column;
          color:#fff;
          span{
            .pxToRem(font-size,22);
            &:last-child{
              margin-top: 2%;
              color:#e6f5ff;
            }
          }
        }
        dt{
          .pxToRem(width,45);
          img{
            width: 100%;
          }
        }
      }
    }
    .h-center{
      width: 100%;
      .pxToRem(height,70);
      background: #fff;
      text-align: center;
      .pxToRem(line-height,70);
      .pxToRem(font-size,25);
      span{
        color: #d6d7d6;
        &:first-child{
          .pxToRem(font-size,25);
        }
      }
    }
    .swiper-nav{
      width: 100%;
      .sw{
        width: 100%;
        .pxToRem(height,65);
        .swiper-slide{
          box-sizing: border-box;
          .pxToRem(padding-right,20);
          .pxToRem(padding-left,20);
          width: auto;
          color: #fff;
          display: flex;
          align-items:center;
          justify-content:center;
          .pxToRem(font-size,22);
        }
      }
    }
  }
  .banner{
    width: 100%;
    background: #fff;
    /* .sw1{ */
       .swiper-container{
      width: 100%;
        .swiper-pagination{
          .swiper-pagination-bullet{
            width: 6px;
            height: 6px;
            opacity:1;
            border:1px solid #fff;
            background: none;
          }
          .swiper-pagination-bullet-active{
            background: #fff;
          }
        }
      .swiper-slide{
        width: 100%;
        display: flex;
        flex-wrap:wrap;
        box-sizing: border-box;
        .pxToRem(margin-bottom,40);
        padding:2% 0; 
        dl{
          width: 25%;
          display:flex;
          flex-direction:column;
          align-items:center;
          text-align: center;
          dd{
            width: 80%;
            .pxToRem(margin-top,25)
          }
          dt{
            width: 80%;
            img{
              width: 100%;
            }
          }
        }
      }
   } 
  }
  .tu{
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 0 2%;
    img{
      width: 100%;
    }
  }
  .main{
    margin-top: 2%;
    background: #fff;
    .pxToRem(margin-bottom,110);
    .top{
      .pxToRem(height,90);
      display: flex;
      justify-content:center;
      align-items:center;
      span{
        &:nth-child(1),&:nth-child(3){
          .pxToRem(width,70);
          .pxToRem(height,2);
          background: #8e8c8e;
        }
        &:nth-child(2){
          .pxToRem(font-size,35);
          .pxToRem(letter-spacing,15);
          .pxToRem(margin-right,25);
          .pxToRem(margin-left,25);
        }
      }
    }
    .body{
      width:100%;
      background: #fff;
      .pxToRem(margin-top,30);
      .ban{
        width: 100%;
        box-sizing: border-box;
        padding:2%;
        display: flex;
        flex-direction:column;
        border-bottom:1px solid #ccc;
        .b-top{
          width: 100%;
          display: flex;
          .b-left{
            .pxToRem(width,125);
            display:flex;
            align-items: center;
            span{
              overflow: hidden;
              width: 100%;
              border:1px solid #e5e5e5;
              .pxToRem(border-radius,6);
              img{
                width: 100%;
              }
            }
          }
          .b-right{
            flex:1;
            .pxToRem(padding-left,22);
            border-bottom: 1px dotted #f5f5f5;
            .title{
              display: flex;
              align-items:center;
              .pxToRem(height,55);
              span{
                &:nth-child(1){
                  .pxToRem(padding-right,5);
                  .pxToRem(padding-left,5);
                  .pxToRem(padding-top,3);
                  .pxToRem(padding-bottom,3);
                  .pxToRem(border-radius,4);
                  background: #fff100;
                  color:#6f3f15;
                  .pxToRem(margin-right,10);
                  .pxToRem(font-size,28);
                }
                &:nth-child(2){
                  flex:1;
                  color:#070807;
                  .pxToRem(font-size,35);
                }
                &:nth-child(3){
                  .pxToRem(padding,5);
                  border: 1px solid #ececec;
                  .pxToRem(border-radius,4);
                  color:#aba8ab;
                  .pxToRem(font-size,22);
                }
              }
            }
            .rate{
              .pxToRem(height,32);
              display: flex;
              align-items:center;
              color: #676667;
              .pxToRem(font-size,24);
              span{
                &:nth-child(1){
                  .pxToRem(width,130);
                  .pxToRem(margin-right,10);
                  img{
                    width: 100%;
                  }
                }
              }
            }
            .ztime{
              .pxToRem(height,65);
              display: flex;
              align-items:center;
              justify-content:space-between;
              .z-l{
                flex:1;
                .pxToRem(font-size,20);
                font-weight: bold;
                color:#636563;
              }
              .z-r{
                .pxToRem(font-size,18);
                color:#bbbabb;
              }
            }
          }
        }
      }
      .b-bottom{
        margin-top: 2%;
        box-sizing: border-box;
        .pxToRem(padding-left,145);
        width: 100%;
        display: flex;
        .jo-l{
          flex:1;
          /* display: flex;
          flex-direction:column; */
          p{
            width: 100%;
            display: flex;
            align-items:center;
            .pxToRem(height,50);
            span{
              &:nth-child(1){
                background: #70bc46;
                .pxToRem(padding,2);
                .pxToRem(border-radius,4);
                color:#fff;
              }
              &:nth-child(2){
                flex:1;
                .pxToRem(padding-left,15);
                color: #666;
              }
            }
          }
        }
        .jo-r{
          .pxToRem(width,125);
          text-align: right;
          color:#bbbabb;
          transition:all .5s linear;
          span{
            &:last-child{
              transform:rotate(0deg);
            }
          }
        }
      }
      .jo-hidd{
        .jo-l{
          .pxToRem(height,100);
          overflow: hidden;
        }
        .jo-r{
          .ic{
            transform:rotate(180deg);
          }
        }
      }
    }
  }
}
</style>
